<template>
  <div class="flash_buy">
    <HelloWorld />
    <Hellodesi />
    <div class="fb_banner_wrap">
      <FbTimer />
    </div>
    <div class="test" style="width: 100%">
      <div class="container">
        <FbProduct v-for="(item, i) of res" :key="i" :title="item.fbsrc" />
        <!--  v-for="(item,i) of res" :key="i" -->
      </div>
    </div>
    <FloatNav />
    <!--回到顶部-->
    <indexFoot />
    <!-- 下层二页脚 -->
    <Foot />
    <!-- 最下层页脚 -->
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld";
import FbTimer from "@/flash_buy/fbTimer";
import FbProduct from "@/flash_buy/fbProduct";
import Hellodesi from "@/components/Hellodesi";
import FloatNav from "@/components/floatNav";
import indexFoot from "@/components/indexfoot"; //页脚组件
import Foot from "@/components/foot"; //页脚最底层
export default {
  name: "FlashTimer",
  components: {
    HelloWorld,
    FbTimer,
    FbProduct,
    Hellodesi,
    FloatNav,
    // 页脚组件在最下面
    indexFoot,
    Foot,
  },
  data() {
    return {
      res: [
        { id: 1, fbsrc: require("@/assets/img/fbuy/product/fb_product1.jpg") },
        { id: 2, fbsrc: require("@/assets/img/fbuy/product/fb_product2.jpg") },
        { id: 3, fbsrc: require("@/assets/img/fbuy/product/fb_product3.jpg") },
        { id: 4, fbsrc: require("@/assets/img/fbuy/product/fb_product4.jpg") },
        { id: 5, fbsrc: require("@/assets/img/fbuy/product/fb_product5.jpg") },
        { id: 6, fbsrc: require("@/assets/img/fbuy/product/fb_product6.jpg") },
        { id: 7, fbsrc: require("@/assets/img/fbuy/product/fb_product7.jpg") },
        { id: 8, fbsrc: require("@/assets/img/fbuy/product/fb_product8.jpg") },
        { id: 9, fbsrc: require("@/assets/img/fbuy/product/fb_product9.jpg") },
        {
          id: 10,
          fbsrc: require("@/assets/img/fbuy/product/fb_product10.jpg"),
        },
      ],
    };
  },
  methods: {
    im() {
      // console.log(this.res[1].fbsrc)
    },
  },
  mounted() {
    this.im();
  },
};
</script>

<style lang="less" scoped>
.flash_buy {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  .fb_banner_wrap {
    width: 100%;
    height: 100%;
  }
}
.container {
  margin: 0 auto;
  width: 1226px;
  display: flex;
}
.test {
  width: 100%;
  .container {
    margin: 0 auto;
    width: 1226px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    justify-content: space-evenly;
    text-align: center;
  }
}
</style>